<template>
  <el-dialog
    title="批量修改产品"
    :visible.sync="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
  >
    <div class="device-update-form">
      <el-form
        :inline="true"
        :model="updateForm"
        ref="updateForm"
        label-width="110px"
        :show-message="false"
      >
        <el-form-item
          label="产品类型"
          prop="typeUuid"
          required
        >
          <el-select
            v-model="updateForm.typeUuid"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteDeviceTypeSearch"
            :loading="remoteLoading"
            @change="productTypeChange"
          >
            <el-option
              v-for="deviceType in deviceTypeList"
              :key="deviceType.uuid"
              :label="deviceType.name"
              :value="deviceType.uuid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="绑定升级包"
          prop="packageId"
        >
          <el-select
            v-model="updateForm.packageId"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请选择升级包"
            :remote-method="remotePackageSearch"
            :loading="remoteLoading"
          >
            <el-option
              v-for="item in packageList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="绑定配置参数"
          prop="settingId"
        >
          <!-- <el-input
            v-model="updateForm.settingId"
            placeholder="请输入设置参数"
          ></el-input> -->
          <el-select
            clearable
            v-model="updateForm.settingId"
            filterable
            remote
            reserve-keyword
            placeholder="请选择产品配置参数"
            :remote-method="remoteSettingSearch"
            :loading="remoteLoading"
          >
            <el-option
              v-for="setting in settingList"
              :key="setting.id"
              :label="setting.name"
              :value="setting.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button
        type="primary"
        @click="showSecDialog"
        :loading="btnLoading"
      >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Message, MessageBox } from 'element-ui';
import { MomentFormat, SortType } from '../../../constants/common';
import { parseError } from '../../../utils';
import { batchUpdateUpgradeDeviceApi } from '../../../api/upgradeDevice';
import { validateForm } from './service';
import { queryProductTypeListApi } from '../../../api/productType';
import { queryPackageListApi } from '../../../api/package';
import { queryDeviceSettingListApi } from '../../../api/deviceSetting';

export default {
  name: 'EditDevice',
  data() {
    return {
      dialogVisible: false,
      btnLoading: false,
      updateForm: {
        productUuidList: [],
        typeUuid: null,
        packageId: null,
        settingId: null
      },
      deviceTypeList: [],
      packageList: [],
      settingList: []
    };
  },
  methods: {
    productTypeChange() {
      this.remotePackageSearch();
      this.remoteSettingSearch();
    },
    showDialog(typeUuid, uuidList, packageId, settingId) {
      this.remoteDeviceTypeSearch();
      this.remotePackageSearch();
      this.remoteSettingSearch();
      this.dialogVisible = true;
      this.updateForm.typeUuid = typeUuid;
      this.updateForm.productUuidList = uuidList;
      this.updateForm.packageId = packageId;
      this.updateForm.settingId = settingId;
    },
    showSecDialog() {
      if (!this.updateForm.typeUuid) return Message.warning('产品类型不能为空');
      this.dialogVisible = false;
      MessageBox.confirm(`确认要更新${this.updateForm.productUuidList.length}个产品吗？`, '更新提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => this.edit())
        .finally(() => this.$refs.updateForm.resetFields());
    },
    edit() {
      batchUpdateUpgradeDeviceApi(this.updateForm.productUuidList, this.updateForm.typeUuid, this.updateForm.packageId, this.updateForm.settingId)
        .then(res => {
          Message.success('成功更新产品');
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)));
    },
    remoteDeviceTypeSearch(query) {
      this.remoteLoading = true;
      queryProductTypeListApi(query, 100)
        .then(deviceTypeList => (this.deviceTypeList = deviceTypeList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remotePackageSearch(query) {
      this.remoteLoading = true;
      queryPackageListApi(query, 100, this.updateForm.typeUuid)
        .then(packageList => (this.packageList = packageList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteSettingSearch(query) {
      this.remoteLoading = true;
      queryDeviceSettingListApi(query, 100, this.updateForm.typeUuid)
        .then(settingList => (this.settingList = settingList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.local-name {
  padding: 20px 20px 10px 20px;
  font-size: 24px;
  font-weight: 800;
  .el-button--primary {
    float: right;
    background-color: #2c83b1 !important;
    border-color: #2c83b1 !important;
  }
}
.device-update-form {
  background-color: #fff;
  width: auto;
  padding: 15px;
  margin: 10px;
  .paging-footer {
    padding: 15px 0;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .el-form-item {
    margin-right: 20px;
  }
}
.device-edit-map {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
</style>
